<template>
    <div>
        <el-tabs v-model="httpTabsValue" type="card" editable @tab-remove="removeTab"
                 @tab-add="addTab(httpTabsValue)">
            <el-tab-pane
                    v-for="(httpTab) in httpTabs"
                    :key="httpTab.name"
                    :label="httpTab.title"
                    :name="httpTab.name">
                <el-row>
                    <el-col :span="24">
                        <div class="title_http">
                            <span class="title_span">{{httpTab.url}}</span>
                            <el-button type="success" class="title_button" size="small" icon="el-icon-document-add"
                                       @click="saveHttp(httpTabs)">保存
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-input placeholder="请输入内容" v-model="httpTab.api.url" class="input-with-select">
                                <el-select v-model="httpTab.api.protocol" slot="prepend" value="" class="select_http">
                                    <el-option label="GET" value="GET"></el-option>
                                    <el-option label="POST" value="POST"></el-option>
                                </el-select>
                                <el-button slot="append" icon="el-icon-s-promotion" @click="request_http(httpTab.api)">send</el-button>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-tabs v-model="httpTab.requestTabs">
                            <el-tab-pane label="Params" name="first">
                                <div><span>Query Params</span></div>
                                <el-checkbox disabled></el-checkbox>
                                <el-input value="key" size="small" disabled class="request_data"></el-input>
                                <el-input value="value" size="small" disabled class="request_data"></el-input>
                                <div v-for="(param, i) in httpTab.api.params" :key="param.id">
                                    <el-checkbox v-model="param.checked"></el-checkbox>
                                    <el-input v-model="param.param_key" size="small" class="request_data"
                                              @input="checked_param(param)"></el-input>
                                    <el-input v-model="param.param_val" size="small" class="request_data"
                                              @input="checked_param(param)"></el-input>
                                    <el-button style="margin-left: 10px"
                                               size="mini"
                                               type="danger"
                                               @click="del_head(httpTab.api.params,param)"
                                               v-show="!(httpTab.api.params.length === i + 1)"
                                    >删除
                                    </el-button>

                                    <el-button type="primary"
                                               size="mini"
                                               @click="add_param(httpTab.api.params)"
                                               v-show="httpTab.api.params.length === i + 1"
                                    >添加
                                    </el-button>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="Headers" name="second">
                                <div><span>Headers</span></div>
                                <el-input value="key" size="small" disabled class="request_data"></el-input>
                                <el-input value="value" size="small" disabled class="request_data"></el-input>
                                <div v-for="(header, i) in httpTab.api.headers" :key="header.id">
                                    <el-input v-model="header.header_key" size="small" class="request_data"></el-input>
                                    <el-input v-model="header.header_val" size="small" class="request_data"></el-input>
                                    <el-button style="margin-left: 10px"
                                               size="mini"
                                               type="danger"
                                               @click="del_head(httpTab.api.headers,header)"
                                               v-show="!(httpTab.api.headers.length === i + 1)"
                                    >删除
                                    </el-button>

                                    <el-button
                                            type="primary"
                                            size="mini"
                                            @click="add_head(httpTab.api.headers)"
                                            v-show="httpTab.api.headers.length === i + 1"
                                    >添加
                                    </el-button>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="Body" name="third">
                                <div><span>Request body</span></div>
                                <el-input
                                        type="textarea"
                                        :rows="6"
                                        v-model="httpTab.api.requestBody">
                                </el-input>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-tabs v-model="httpTab.responseTabs">
                            <el-tab-pane label="Response body" name="first">
                                <el-input
                                        type="textarea"
                                        :rows="10"
                                        disabled
                                        v-model="httpTab.api.responseBody">
                                </el-input>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                httpTabsValue: '1',
                httpTabs: [],
                tabIndex: 0,
            }
        },
        computed:{

        },
        watch: {
            //监控data-httpTabs数据变化
            httpTabs: {
                handler: function () {
                    for (let item of this.httpTabs){
                        let tempApi = item.api;
                        let tempStr = tempApi.url.length > 12 ? tempApi.url.substr(1, 12) : tempApi.url;
                        item.title = tempApi.protocol + " " + tempStr;
                        item.url = tempApi.url;
                        let paramStr = "";
                        let items = tempApi.params
                        for (let key in items){
                            if (items.hasOwnProperty(key)){
                                let item =  items[key];
                                if (item.checked){
                                    if (key > 0.)
                                        paramStr += "&";
                                    else
                                        paramStr += "?";
                                    paramStr += item.param_key+"="+item.param_val;
                                }
                            }
                        }
                        item.url += paramStr;
                        if (item.url.length >50){
                            item.url = item.url.substr(1,50)+"…"
                        }
                    }
                },
                deep: true
            }
        },
        created() {
            let tmp = this.$store.state.httpTabs;
            if (tmp.length > 0) {
                this.httpTabs = tmp;
                this.httpTabsValue = tmp[0].name;
                this.tabIndex = tmp.length;
            }else{
                this.addTab();
            }
        },
        methods: {
            addTab() {
                let newTabName = ++this.tabIndex + '';
                console.log(newTabName);
                this.httpTabs.push({
                    title: '',
                    name: newTabName,
                    requestTabs: 'first',
                    responseTabs: 'first',
                    api: {
                        protocol: 'GET',
                        url: '',
                        params: [{param_key: "", param_val: "", checked: false}],
                        headers: [{header_key: "", header_val: "", checked: false}],
                        requestBody: '',
                        responseBody: ''
                    }
                });
                this.httpTabsValue = newTabName;
                console.log(this.httpTabs)
            },
            removeTab(targetName) {
                let tabs = this.httpTabs;
                let activeName = this.httpTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.httpTabsValue = activeName;
                this.httpTabs = tabs.filter(tab => tab.name !== targetName);
                this.saveHttp(this.httpTabs);
            },
            del_head(items, httpTab) {
                let index = items.indexOf(httpTab);
                if (index !== -1) {
                    items.splice(index, 1)
                }
            },
            add_param(params) {
                params.push({param_key: "", param_val: "", checked: false});
            },
            saveHttp(value) {
                this.$store.commit("saveHttpTabs", value);
            },
            checked_param(value) {
                value.checked = true;
            },
            request_http(api){

            }
        }
    }
</script>

<style scoped>
    .title_button {
        position: absolute;
        right: 0;
        top: 5px;
    }

    .title_http {
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
        height: 40px;
        margin-bottom: 5px;
    }

    .title_span {
        position: absolute;
        left: 0;
        top: 5px;
    }

    .select_http {
        width: 130px;
    }

    .input-with-select {
        background-color: #fff;
    }

    .request_data {
        width: 44% !important;
        margin: 2px !important;
    }
</style>
